<template>
  <div class="reception-arrangement">
    <div class="header">
      <router-link to="/main/xingzheng/jiedai/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>接待安排</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待安排" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="applicationNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="申请人" width="120"></el-table-column>
            <el-table-column prop="department" label="申请部门" width="150"></el-table-column>
            <el-table-column prop="guestName" label="接待对象" width="120"></el-table-column>
            <el-table-column prop="receptionTime" label="接待时间" width="180">
              <template slot-scope="scope">
                {{ formatDateRange(scope.row.receptionTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleArrangement(scope.row)">安排</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已安排" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="applicationNo" label="申请编号" width="180"></el-table-column>
            <el-table-column prop="guestName" label="接待对象" width="120"></el-table-column>
            <el-table-column prop="receptionStaff" label="接待人员" width="120"></el-table-column>
            <el-table-column prop="receptionTime" label="接待时间" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="接待申请详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="application-detail" v-if="currentApplication">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="申请编号">{{ currentApplication.applicationNo }}</el-descriptions-item>
          <el-descriptions-item label="申请人">{{ currentApplication.applicant }}</el-descriptions-item>
          <el-descriptions-item label="申请部门">{{ currentApplication.department }}</el-descriptions-item>
          <el-descriptions-item label="接待对象">{{ currentApplication.guestName }}</el-descriptions-item>
          <el-descriptions-item label="来访单位">{{ currentApplication.guestCompany }}</el-descriptions-item>
          <el-descriptions-item label="来访人数">{{ currentApplication.guestCount }}人</el-descriptions-item>
          <el-descriptions-item label="接待时间">
            {{ formatDateRange(currentApplication.receptionTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="接待地点">{{ currentApplication.location }}</el-descriptions-item>
          <el-descriptions-item label="接待类型">{{ currentApplication.receptionType }}</el-descriptions-item>
          <el-descriptions-item label="预计费用">{{ currentApplication.estimatedCost }}元</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section" v-if="currentApplication.arrangement">
          <h4>接待安排</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="接待人员">{{ currentApplication.arrangement.receptionStaff }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ currentApplication.arrangement.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="用餐安排">{{ currentApplication.arrangement.mealArrangement }}</el-descriptions-item>
            <el-descriptions-item label="住宿安排">{{ currentApplication.arrangement.accommodation }}</el-descriptions-item>
          </el-descriptions>
          <div class="schedule-list">
            <h4>日程安排</h4>
            <el-timeline>
              <el-timeline-item
                v-for="(schedule, index) in currentApplication.arrangement.schedules"
                :key="index"
                :timestamp="schedule.time">
                {{ schedule.activity }}
                <p class="schedule-location" v-if="schedule.location">地点：{{ schedule.location }}</p>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 安排对话框 -->
    <el-dialog title="接待安排" :visible.sync="arrangementDialogVisible" width="60%">
      <el-form :model="arrangementForm" label-width="100px" v-if="currentApplication">
        <el-form-item label="接待人员">
          <el-select v-model="arrangementForm.receptionStaff" placeholder="请选择接待人员">
            <el-option label="张三" value="张三"></el-option>
            <el-option label="李四" value="李四"></el-option>
            <el-option label="王五" value="王五"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="arrangementForm.contactPhone"></el-input>
        </el-form-item>

        <el-form-item label="用餐安排">
          <el-input type="textarea" v-model="arrangementForm.mealArrangement" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="住宿安排">
          <el-input type="textarea" v-model="arrangementForm.accommodation" rows="3"></el-input>
        </el-form-item>

        <el-form-item label="日程安排">
          <div class="schedule-form">
            <div v-for="(schedule, index) in arrangementForm.schedules" :key="index" class="schedule-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-time-picker v-model="schedule.time" placeholder="时间"></el-time-picker>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="schedule.activity" placeholder="活动内容"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="schedule.location" placeholder="地点"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removeSchedule(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain icon="el-icon-plus" @click="addSchedule">添加日程</el-button>
          </div>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" v-model="arrangementForm.remarks" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="arrangementDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitArrangement">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          applicationNo: 'JD202403001',
          applicant: '张三',
          department: '技术部',
          guestName: '李总',
          guestCompany: 'XX科技公司',
          guestCount: 3,
          receptionTime: ['2024-03-20 14:00:00', '2024-03-20 17:00:00'],
          purpose: '项目合作洽谈',
          location: '公司会议室',
          receptionType: '商务接待',
          estimatedCost: 2000
        }
      ],
      completedList: [
        {
          applicationNo: 'JD202403002',
          guestName: '王总',
          receptionStaff: '李四',
          receptionTime: '2024-03-15 09:00:00',
          status: '已完成',
          arrangement: {
            receptionStaff: '李四',
            contactPhone: '13800138000',
            mealArrangement: '午餐安排在XX酒店',
            accommodation: '入住XX酒店',
            schedules: [
              { time: '09:00', activity: '公司参观', location: '公司大厅' },
              { time: '10:30', activity: '项目洽谈', location: '会议室' },
              { time: '12:00', activity: '商务午餐', location: 'XX酒店' }
            ]
          }
        }
      ],
      detailDialogVisible: false,
      arrangementDialogVisible: false,
      currentApplication: null,
      arrangementForm: {
        receptionStaff: '',
        contactPhone: '',
        mealArrangement: '',
        accommodation: '',
        schedules: [{ time: '', activity: '', location: '' }],
        remarks: ''
      }
    }
  },
  methods: {
    formatDateRange(range) {
      if (!range || !range.length) return ''
      return `${range[0]} 至 ${range[1]}`
    },
    getStatusType(status) {
      const map = {
        '待执行': 'warning',
        '进行中': 'primary',
        '已完成': 'success',
        '已取消': 'info'
      }
      return map[status] || 'info'
    },
    viewDetail(row) {
      this.currentApplication = row
      this.detailDialogVisible = true
    },
    handleArrangement(row) {
      this.currentApplication = row
      this.arrangementForm = {
        receptionStaff: '',
        contactPhone: '',
        mealArrangement: '',
        accommodation: '',
        schedules: [{ time: '', activity: '', location: '' }],
        remarks: ''
      }
      this.arrangementDialogVisible = true
    },
    addSchedule() {
      this.arrangementForm.schedules.push({ time: '', activity: '', location: '' })
    },
    removeSchedule(index) {
      this.arrangementForm.schedules.splice(index, 1)
    },
    submitArrangement() {
      if (!this.arrangementForm.receptionStaff || !this.arrangementForm.contactPhone) {
        this.$message.error('请填写完整信息')
        return
      }

      // TODO: 提交安排到后端
      this.currentApplication.arrangement = { ...this.arrangementForm }
      this.currentApplication.receptionStaff = this.arrangementForm.receptionStaff
      this.currentApplication.status = '待执行'

      // 从待安排列表移动到已安排列表
      const index = this.pendingList.findIndex(item => item.applicationNo === this.currentApplication.applicationNo)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentApplication)
      }

      this.$message.success('接待安排已完成')
      this.arrangementDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.reception-arrangement {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 15px 0 10px;
      color: #303133;
    }
  }

  .schedule-form {
    .schedule-item {
      margin-bottom: 15px;
    }
  }

  .schedule-list {
    margin-top: 20px;

    .schedule-location {
      margin: 5px 0 0;
      font-size: 13px;
      color: #606266;
    }
  }
}
</style> 